<template>
	<view class="nickname">
		<view class="font14 title">我的昵称</view>
		<view class="flex alignCenter inputBox justConBetween">
			<input class="font14" maxlength="10" v-model.trim="nickname" placeholder="记得填写昵称哦" placeholder-class="font14 color666"/>
			<uni-icons class="clear" type="clear" size="22" @click="nickname=''" v-if="nickname"></uni-icons>
		</view>
		<view class="font12 color999">昵称最多只能输入10个字符且只能包含数字、字母、汉字哦~</view>
		<view class="noWidthBtn font14" @click="save"><text>保存</text></view>
	</view>
</template>

<script>
	import { userName } from "@/utils/verification.js"
	import { editMyInfo } from "@/api/mine.js"
	export default {
		data() {
			return {
				nickname:''
			}
		},
		onLoad(option) {
			this.nickname=option.name?option.name:''
		},
		methods: {
			save(){
				if(!this.nickname){
					uni.showToast({
						icon:'none',
						title:'请填写昵称！'
					})
					return
				}else if(this.nickname.length>10){
					uni.showToast({
						icon:'none',
						title:'长度不能超过10个字符！'
					})
					return
				}else if(!(userName.test(this.nickname))){
					uni.showToast({
						icon:'none',
						title:'昵称只能包含汉字、字母、数字！'
					})
					return
				}
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				editMyInfo({createUserName:this.nickname}).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						uni.showToast({
							icon:'none',
							title:'修改成功'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1200)
					}
				}).catch((err)=>{uni.hideLoading()})
			}
		}
	}
</script>

<style scoped lang="scss">
@import "@/static/public.scss";
.nickname{
	padding: 30rpx;
	box-sizing: border-box;
	.title{
		margin: 0 0 30rpx;
	}
	.inputBox{
		border-bottom: 1px solid $bordercolor;
		input{
			height: 70rpx;
			line-height: 70rpx;
			width: 100%;
		}
		.clear{
			flex-shrink: 0;
		}
	}
	.noWidthBtn{
		width: 400rpx;
		height: 80rpx;
		border-radius: 100rpx;
		line-height: 80rpx;
		margin:40rpx auto;
		text{
			display: block;
			margin-top: -10rpx;
		}
	}
}

</style>
